<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>用户登录</p>
		</header>

		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" v-model="userName" placeholder="手机号码">
				</div>
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" v-model="password" placeholder="密码">
				</div>
			</li>
			<li>
				<div class="title">
					验证码：
				</div>
				<div class="content">
					<div class="code">
						<input type="text" v-model="code" placeholder="验证码">&nbsp;
						<img :src="codeUrl">
						<a @click.prevent="changeCode"> 看不清，换一个 </a>
					</div>

				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">登录</button>
		</div>
		<div class="button-register">
			<button @click="register">去注册</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import '../api/apiUrl'
export default {
	name: 'Login',
	data() {
		return {
			userName: '',
			userId: '',
			password: '',
			code: '',
			codeUrl: this.$axios.defaults.baseURL + "geneCode",
			source: ""
		}
	},
	methods: {
		changeCode() {
			let initCodeUrl = this.$axios.defaults.baseURL + "geneCode"
			let dt = +new Date()
			this.codeUrl = initCodeUrl + "?t=" + dt
		},
		login() {
			if (this.userName == '') {
				alert('手机号码不能为空！');
				return;
			}
			if (this.password == '') {
				alert('密码不能为空！');
				return;
			}


			//登录请求
			this.$axios.post('users/login', {
				userName: this.userName,
				password: this.password,
				code: this.code,
				source: this.source
			}).then(response => {
				console.log("11111111111111111111");
				console.log("-------登录接口的response:%o", response);
				let res = response.data;
				let code = res.code;

				if (20000 != code) {
					alert(res.msg);
				} else {

					let user = res.data;
					console.log(11111);
					console.log(user);

					//sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
					user.userImg = '';
					user.password = ''; // 密码敏感数据，不显示到前端。
					this.$setSessionStorage('user', user);
					this.$router.go(-1); // 返回上一个页面
				}
			}).catch(error => {
				console.error(error);
			});
		},
		register() {
			this.$router.push({ path: 'register' });
		}
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
}


.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .form-box li .content .code {
	display: flex;
	height: 8vw;
	justify-content: space-around;
	/* border: 1px solid #000; */
}

.wrapper .form-box li .content .code img {
	border: 1px solid #371d1d;
	width: 20%;
}

.wrapper .form-box li .content .code input {
	width: 30%;
	/* border: 1px solid #753a3a; */
	height: 6vw;
	line-height: 6vw;
	text-align: left;
	position: relative;
	top: 1vw;
}

.wrapper .form-box li .content .code a {
	display: inline-block;
	height: 6vw;
	line-height: 6vw;
	/* border: 1px solid #000; */
	position: relative;
	top: 1vw;
}


.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;

	border: none;
	outline: none;
}

.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	/*与上面登录按钮不同的只有颜色、背景色、边框不同*/
	color: #666;
	background-color: #EEE;
	border: solid 1px #DDD;
	border-radius: 4px;

	border: none;
	outline: none;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .footer li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #999;
	user-select: none;
	cursor: pointer;
}

.wrapper .footer li p {
	font-size: 2.8vw;
}

.wrapper .footer li i {
	font-size: 5vw;
}
</style>
